<template>
  <transition name="slide">
    <div class="report-container" ref="wrapper">
        <div class="report-list">

          <div v-for="item in reportList" :key="item.id">
            <a :href="item.scanpicture"  class="report-item">
              <div class="report-title">
                <div class="report-title">{{item.packaName}}</div>
                <div class="report-download">查看报告</div>
              </div>
              <div class="report-body">
                <div class="user-name-container">
                  <div class="list-item-title">体检姓名</div>
                  <div>{{item.personName}}</div>
                </div>
                <div class="test-time-container">
                  <div class="list-item-title">上传时间</div>
                  <div class="time">{{item.uploadtime.split(' ')[0]}}</div>
                </div>
                <div class="text-reportid-container">
                  <div class="list-item-title">订单编号</div>
                  <div>{{item.toorderid}}</div>
                </div>
              </div>
            </a>
          </div>

          <!-- <div class="report-item" @click="toreportDetail(7)">
            <div class="report-title">
              <div class="report-title">123</div>
              <div class="report-download">下载报告</div>
            </div>
            <div class="report-body">
              <div class="user-name-container">
                <div class="list-item-title">体检姓名</div>
                <div>12312</div>
              </div>
              <div class="test-time-container">
                <div class="list-item-title">体检时间</div>
                <div class="time">123123</div>
              </div>
              <div class="text-reportid-container">
                <div class="list-item-title">订单编号</div>
                <div>dfadfj123123</div>
              </div>
            </div>
          </div> -->
        </div>

        <router-view></router-view>
    </div>
  </transition>
</template>

<script>
import BScroll from 'better-scroll'
import { http } from 'api/main'

export default {
  data () {
    return {
      reportList: [],
    }
  },
  created() {
    this._getReportList()
  },
  mounted() {
    setTimeout(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true
      })
    }, 20)
  },
  methods: {
    download(url) {

    },
    toReportDetail(id) {
      this.$router.push({
        path: `/user/report/${id}`
      })
    },
    _getReportList() {
      http('report').then((res) => {
        console.log(res)
        this.reportList = res
      })
    }
  },
  components: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"

.report-container
  position: fixed;
  top: 0
  left: 0
  right: 0
  bottom: 0
  z-index: 1000
  background-color: $color-background
  overflow: hidden;
  .report-list
    .report-item
      background-color: #fff
      margin: 10px 10px 0 10px
      padding: 20px
      min-height: 120px
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      breport-top: 3px solid #ddd
      .report-title
        display: flex
        justify-content: space-between;
        align-items: baseline;
        .report-title
          font-size: 20px
        .report-status
          color: #009fab
      .report-body
        color: #666
        display: flex
        flex-direction: column;
        justify-content: space-between;
        height: 70px
        .user-name-container
          display: flex
        .test-time-container
          display: flex
          .time
            color: #009fab
        .text-reportid-container
          display: flex
        .list-item-title
          width: 30%


.slide-enter-active,
.slide-leave-active
  transition all 0.3s
.slide-enter,
.slide-leave-to
  transform: translate3D(100%, 0, 0)
</style>
